<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div style="border: coral 3px solid;width: 800px;margin: 0 auto;" class="box1">
      <h3>环境配置文件</h3>
      <button v-on:click="click1_1()" style="display: block">
        在main.js里用Vue.prototype.$arg1 = process.env.VUE_APP_ARG，然后在组件里用this.$arg1访问
      </button>
      <button v-on:click="click1_2()" style="display: block">
        直接在组件里用process.env.VUE_APP_ARG访问
      </button>
      <button v-on:click="click1_3()" style="display: block">
        BASE_URL是vue内置变量，无需再环境配置文件里设置，直接再vue.config.js文件里设置 publicPath: '/xxxxxx' 即可
      </button>
      <button v-on:click="click1_4()" style="display: block">
        用于测试自带的process.env.NODE_ENV环境变量
      </button>
    </div>

    <!-- ---------------------------------------------------------------------------------------------- -->

    <div style="border: chartreuse 3px solid;width: 800px;margin: 0 auto;">
      <h3>自定义配置文件(修改项目的配置文件,无需重新打包)</h3>
      <button v-on:click="click2_1()" style="display: block">
        获取自定义配置文件里的数据
      </button>
    </div>


    <!-- ---------------------------------------------------------------------------------------------- -->


    <div style="border: chartreuse 3px solid;width: 800px;margin: 0 auto;">
      <h3>用于测试axios发送请求</h3>
      <button v-on:click="click3_1()" style="display: block">
        发送axios给请求！！
      </button>
    </div>


    <!-- ---------------------------------------------------------------------------------------------- -->

    <div style="border: chartreuse 3px solid;width: 800px;margin: 0 auto;">
      <h3>用于测试axios响应拦截器</h3>
      <button v-on:click="click3_2()" style="display: block">
        发送axios给请求！！
      </button>
    </div>

    <!-- ---------------------------------------------------------------------------------------------- -->

    <div class="test">用于测试全局css样式是否生效</div>

    <div id="scene">
      <div data-depth="0.2">My first Layer!</div>
      <div data-depth="0.6">My second Layer!</div>
    </div>
  </div>
</template>

<script>
import {getRequest} from '@/api/index.js'

export default {
  data(){
    return{

    }
  },
  mounted(){
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene);
  },
  methods:{
    click1_1(){
      alert(this.$arg1);
    },
    click1_2(){
      alert(process.env.VUE_APP_ARG);
    },
    click1_3(){
      alert(process.env.BASE_URL);
    },
    click1_4(){
      alert(process.env.NODE_ENV);
    },
    click2_1(){
      alert(window.appconfig.myage1);
    },
    click3_1(){
      let p = getRequest('/video/getVideoFolderList',null);
      p.then((date)=>{
        console.log(date);
      }).catch(err=>{
        console.log(err);
      })
    },
    click3_2(){
      getRequest('/video/getVideoFolderList666',{id:16});
    }
  }
}
</script>
<style scoped>
.box1 > button + button{ /*每个按钮之间设置间距 */
  margin-top: 10px;
}

.test{
  width: 300px;
  height: 20px;
}

</style>
